import React from 'react';
import { Search, Grid, List, Upload, MoreVertical, Eye } from 'lucide-react';
import { Button } from '@/components/ui/button';

const FileSystemHeader = ({ 
  searchQuery, 
  onSearchChange, 
  viewMode, 
  onViewModeChange, 
  onUploadClick,
  selectedCount = 0,
  hideSearch = false,
  hideTitle = false
}) => {
  return (
    <div className="flex items-center space-x-3">
      {!hideSearch && (
        <div className="relative">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-material-grey-500" />
          <input
            type="text"
            placeholder="搜索文件..."
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
            className="pl-10 pr-4 py-2 w-80 border border-material-grey-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors"
          />
        </div>
      )}

      <div className="flex items-center bg-material-grey-100 rounded-lg p-1">
        <Button
          variant={viewMode === 'grid' ? 'default' : 'ghost'}
          size="sm"
          onClick={() => onViewModeChange('grid')}
          className="px-3"
          title="卡片模式"
        >
          <Grid className="w-4 h-4" />
        </Button>
        <Button
          variant={viewMode === 'list' ? 'default' : 'ghost'}
          size="sm"
          onClick={() => onViewModeChange('list')}
          className="px-3"
          title="列表模式"
        >
          <List className="w-4 h-4" />
        </Button>
        <Button
          variant={viewMode === 'preview' ? 'default' : 'ghost'}
          size="sm"
          onClick={() => onViewModeChange('preview')}
          className="px-3"
          title="预览模式"
        >
          <Eye className="w-4 h-4" />
        </Button>
      </div>

      {onUploadClick && (
        <Button onClick={onUploadClick} className="bg-primary hover:bg-primary-600">
          <Upload className="w-4 h-4 mr-2" />
          上传文件
        </Button>
      )}

      {selectedCount > 0 && (
        <Button variant="outline">
          <MoreVertical className="w-4 h-4 mr-2" />
          批量操作 ({selectedCount})
        </Button>
      )}
    </div>
  );
};

export default FileSystemHeader;
